<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件中定义属于组件的数据</title>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <user-list></user-list>
    </div>
    <!-- 定义用户列表组件 -->
    <template id="userList">
      <div>
        <h1>用户列表</h1>
        <ul>
          <li v-for="user in users">{{user.name}}</li>
        </ul>
        <input type="text" v-model="user.name" placeholder="请输入用户名" />
        <button @click="add">添加用户</button>
      </div>
    </template>
  </body>
</html>
<script type="module">
  import {} from "./js/vue.js";
  // 定义用户列表组件
  let userList = {
    template: "#userList",
    data() {
      return {
        user: {},
        users: [],
      };
    },
    methods: {
        add() {
          this.users.push(this.user);
          this.user = {};
        },

      //获取用户列表
      getUsers() {
        this.users = [
          { name: "张三" },
          { name: "李四" },
          { name: "王五" },
          { name: "赵六" },
          { name: "孙七" },
        ];
      },
    },
    created() {
      console.log("用户列表组件创建完毕");
      this.getUsers();
    },
  };
  var app = new Vue({
    el: "#app",
    data: {
      msg: "组件中定义属于组件的数据",
    },
    components: {
      userList,
    },
  });
</script>
